<template>
  <NavigationBar>
    <div class="classification">
      <Tabs value="1">
        <TabPane name="1" label="分类" icon="ios-apps">
          <Sort></Sort>
        </TabPane>
        <TabPane name="2" label="标签" icon="ios-pricetags">
          <Tags></Tags>
        </TabPane>
        <TabPane name="3" label="未分类文章" icon="logo-freebsd-devil">
          <Unclassified></Unclassified>
        </TabPane>
      </Tabs>


    </div>
  </NavigationBar>

</template>

<script>
  import NavigationBar from "@/components/common/NavigationBar";
  import Sort from "@/views/classification/sort/Sort";
  import Tags from "@/views/classification/tags/Tags";
  import Unclassified from "@/views/classification/unclassified/Unclassified";

  export default {
    name: "classification",
    components: {
      NavigationBar,
      Sort,
      Tags,
      Unclassified
    },
    data() {
      const validateName = (rule, value, callback) => {
        if (value === '') {
          this.nameRight = false;
          callback(new Error('分类名不能为空！'));
        } else if (value.length > 20) {
          this.nameRight = false;
          callback(new Error('分类名字数不能大于20'));
        } else {
          this.nameRight = true;
          callback();
        }
      };
      const validateDescribe = (rule, value, callback) => {
        if (value === '') {
          this.describeRight = false;
          callback(new Error('分类描述不能为空！'));
        } else if (value.length > 100) {
          this.describeRight = false;
          callback(new Error('分类描述字数不能大于100'));
        } else {
          this.describeRight = true;
          callback();
        }
      };
      return {
        //提示框
        isMessage: true,
        nameRight: false,
        describeRight: false,
        //是否上传图片 上传图片时同时将其他信息一起上传
        isUpload: false,
        loading: false,
        addLoading: false,
        isEdit: false,
        //增加分类的抽屉显示
        isShow: false,
        classification: {
          name: '',
          describe: ''
        },
        addInfo: {
          name: '',
          describe: ''
        },
        ruleCustom: {
          name: [
            { validator: validateName, trigger: 'blur' }
          ],
          describe: [
            { validator: validateDescribe, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {

    }
  }
</script>

<style scoped>

</style>